<template>
    <div class="credits-exchange">
      <ul class="nav">
        <li :class="{active: current === 1}" style="border-right: 1px solid #DFDFDF"><a @click="current = 1">兑换列表</a></li>
        <li :class="{active: current === 2}"><a @click="current = 2">我的兑换</a></li>
      </ul>
      <div class="am-tab-panel ">
        <dd v-if="current === 2">
          <dl>
            <section>
              <img src="">
            </section>
            <aside>
              <div style="flex: 1;">
                <p>科沃斯地宝扫地机器人家 用智能</p>
                <p style=" margin-top: 30px;"><span>1256</span>积分</p>
              </div>
              <div style="text-align: right">
                <button>待发货</button>
                <p style="margin-top: 50px;">兑换时间 03:23:05</p>
              </div>
            </aside>
          </dl>
          <dl>
            <section>
              <img src="">
            </section>
            <aside>
              <div style="flex: 1;">
                <p>科沃斯地宝扫地机器人家 用智能</p>
                <p style="margin-top: 30px;"><span>1256</span>积分</p>
              </div>
              <div style="text-align: right">
                <button>已发货</button>
                <p style="margin-top: 50px;">兑换时间 03:23:05</p>
              </div>
            </aside>
          </dl>
        </dd>
        <ul v-else>
          <li @click="getDetails">
            <header>
              <img src="">
            </header>
            <section>
              <h4>彩色点断式6卷装垃圾袋加 厚中大号</h4>
              <p><span>300</span>积分</p>
            </section>
          </li>
          <li @click="getDetails">
            <header>
              <img src="">
            </header>
            <section>
              <h4>彩色点断式6卷装垃圾袋加 厚中大号</h4>
              <p><span>300</span>积分</p>
            </section>
          </li>
          <li @click="getDetails">
            <header>
              <img src="">
            </header>
            <section>
              <h4>彩色点断式6卷装垃圾袋加 厚中大号</h4>
              <p><span>300</span>积分</p>
            </section>
          </li>
          <li @click="getDetails">
            <header>
              <img src="">
            </header>
            <section>
              <h4>彩色点断式6卷装垃圾袋加 厚中大号</h4>
              <p><span>300</span>积分</p>
            </section>
          </li>
        </ul>
        <p>我们也是有底线的</p>
      </div>
    </div>
</template>

<script type="ECMAScript 6">
  export default {
    name: "credits-exchange",
    data () {
      return {
        current: 1
      };
    },
    methods: {
      handleChange (e) {
        this.current = e.mp.detail.key;
      },
      getDetails () {
        let url = './credits-details/main';
        mpvue.navigateTo({ url });
      }
    }
  };
</script>

<style lang="stylus" scoped>
  .nav {position: fixed; top:0; width: 100%; height: 50px; display: flex; align-items: center; background: #fff; border-top 1px solid #f2f2f2;}
  .nav li{ flex: 1; text-align: center;}
  .nav li a{font-size: 14px;}
  .nav li a:active{color: #525252;}
  .nav li.active a{color: #3BB301;}

  .am-tab-panel {margin-top: 55px;}
  .am-tab-panel ul{display: flex; align-items: center; flex-flow:wrap;padding: 0 13px;}
  .am-tab-panel ul li{ position: relative; width: 49%; margin 0 2% 5px 0; padding-bottom 10px; border-radius: 5px; background: #fff;}
  .am-tab-panel ul li:nth-of-type(2n){margin-right: 0}
  .am-tab-panel ul li header{min-height: 170px; width: 100%;}
  .am-tab-panel ul li header img{width: 100%; height: 100%;}
  .am-tab-panel ul li section {margin-top: 9px; padding: 0 14px 0 8px;}
  .am-tab-panel ul li section h4{font-size: 13px; font-weight: normal;}
  .am-tab-panel ul li section p{font-size: 12px;}
  .am-tab-panel ul li section p > span{font-size: 17px; color: #F54727;}
  .am-tab-panel dd{ padding-bottom: 10px; background: #fff;}
  .am-tab-panel dd dl{ display: flex; padding: 13px 13px 0 13px;}
  .am-tab-panel dd dl section{width: 100px; height: 100px; border-radius: 3px;}
  .am-tab-panel dd dl section img{width: 100%; height: 100%;}
  .am-tab-panel dd dl aside{flex: 1; display: flex; margin-left: 10px; border-bottom: 1px solid #F2F2F2;}
  .am-tab-panel dd dl aside div p{font-size: 14px; color: #606060;}
  .am-tab-panel dd dl aside div p:nth-child(2){font-size: 12px; color:#525252}
  .am-tab-panel dd dl aside div p span{font-size: 16px; color: #F54727;}
  .am-tab-panel dd dl aside div button{font-size: 12px; color: #F54727; background: transparent; border: none;}
  .am-tab-panel >p{ margin-top: 10px; text-align: center; font-size: 14px; color: #A2A2A2;}
</style>
